/**
 *
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 *
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...
// localStorage.setItem("doneLS", JSON.stringify([3,4]));
let todoLS=JSON.parse(localStorage.getItem("todoLS")) || []
let doneLS=JSON.parse(localStorage.getItem("doneLS")) || []
let add = document.querySelector(".add")
let input = document.querySelector("#title")
let todolist = document.querySelector("#todolist")
let todocount = document.querySelector("#todocount")
let donecount = document.querySelector("#donecount")
let donelist = document.querySelector("#donelist")
init()

function init() {
  gettodo()
  addToDo()
  toDoOver()
  again()
  setBottom()
}
function gettodo(){
  if(todoLS===null)return
  todocount.innerHTML = todoLS.length
  todoLS.forEach(item=>{
    todolist.innerHTML += `<li>
  <input type="checkbox" />
  <p>${item}</p>
  <a href="javascript:;">-</a>
</li>`
  })
  if(doneLS===null)return
  donecount.innerHTML = doneLS.length
  doneLS.forEach(item=>{
    donelist.innerHTML += `<li>
  <input type="checkbox" checked="checked"/>
  <p>${item}</p>
  <a href="javascript:;">-</a>
</li>`
todocount.innerHTML=todoLS.length
donecount.innerHTML=doneLS.length
  })
}

function addToDo() {
  add.addEventListener("submit", submitHandler)
}

function submitHandler(e) {
  e.preventDefault();
  todoLS.push(add.querySelector("input").value)
  localStorage.setItem("todoLS", JSON.stringify(todoLS));
  // console.log(todoLS)
  // console.log(todolist)
  todolist.innerHTML += `<li>
  <input type="checkbox" />
  <p>${add.querySelector("input").value}</p>
  <a href="javascript:;">-</a>
</li>`
  add.querySelector("input").value = ""
  todocount.innerHTML = todocount.innerHTML - 0 + 1
}

function toDoOver() {
  todolist.addEventListener("click", clickHandler)
}

function clickHandler(e) {
  if (e.target.nodeName === "INPUT") {
    // console.log(e.target.parentElement.querySelector("p").innerHTML)
    todoLS=todoLS.filter(item=>{
      return item!==e.target.parentElement.querySelector("p").innerHTML
    })
    doneLS.push(e.target.parentElement.querySelector("p").innerHTML)
    localStorage.setItem("doneLS", JSON.stringify(doneLS));
    localStorage.setItem("todoLS", JSON.stringify(todoLS));
    donelist.innerHTML += `<li>
    <input type="checkbox" checked="checked" />
    <p>${e.target.parentElement.querySelector("p").innerHTML}</p>
    <a href="javascript:;">-</a>
</li>`
    e.target.parentNode.remove()
    todocount.innerHTML = todocount.innerHTML - 1
    donecount.innerHTML = donecount.innerHTML - 0 + 1
  }
  if(e.target.nodeName === "A"){
    todoLS=todoLS.filter(item=>{
      return item!==e.target.parentElement.querySelector("p").innerHTML
    })
    localStorage.setItem("todoLS", JSON.stringify(todoLS));
    todolist.removeChild(e.target.parentElement)
    todocount.innerHTML = todocount.innerHTML - 1
  }
}

function again() {
  donelist.addEventListener("click", clickHandler2)
}
function clickHandler2(e) {
  if (e.target.nodeName === "INPUT") {
    doneLS=doneLS.filter(item=>{
      return item!==e.target.parentElement.querySelector("p").innerHTML
    })
    todoLS.push(e.target.parentElement.querySelector("p").innerHTML)
    localStorage.setItem("doneLS", JSON.stringify(doneLS));
    localStorage.setItem("todoLS", JSON.stringify(todoLS));
    // console.log(e.target.parentElement.querySelector("p").innerHTML)
    todolist.innerHTML += `<li>
    <input type="checkbox"  />
    <p>${e.target.parentElement.querySelector("p").innerHTML}</p>
    <a href="javascript:;">-</a>
</li>`
    e.target.parentNode.remove()
    todocount.innerHTML = todocount.innerHTML - 0+1
    donecount.innerHTML = donecount.innerHTML -1
  }
  if(e.target.nodeName === "A"){
    doneLS=doneLS.filter(item=>{
      return item!==e.target.parentElement.querySelector("p").innerHTML
    })
    localStorage.setItem("doneLS", JSON.stringify(doneLS));
    donelist.removeChild(e.target.parentElement)
    donecount.innerHTML = donecount.innerHTML - 1
  }
}
function setBottom(){
  ajax({
    url: 'http://localhost:9999/getbottom',
    method: 'GET',
    // data: { name: 'Jack', age: 18 },
    dataType: 'json',
    success (res) {
      console.log(res)
      document.querySelector("#ipv4").innerHTML=res.ip
      document.querySelector("#addr").innerHTML=res.country+"&nbsp;"+res.area
    }
  })
}